<template>
  <el-menu-item index="6-1" @click="noticelist">查看公告</el-menu-item>

  <el-dialog class="notice-lists" v-model="result" width="70%" draggable>
    <h1>公告列表</h1>
    <el-table :data="arr" border style="width: 90%">
      <el-table-column prop="notice_id" label="序号" width="80" />
      <el-table-column prop="user_id" label="发布人" width="80" />
      <el-table-column prop="notice_content" label="公告内容" />
      <el-table-column prop="notice_time" label="发布时间" />
      <el-table-column label="查看" width="150">
        <!-- 插槽 取id -->
        <template #default="scope">
          <el-button type="primary" @click="noticeShow(scope.row.notice_id)"
            >详细信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!-- 点击详情信息 -->
  <el-dialog class="notice-content" v-model="noticeshow" draggable center>
    <h1>公告内容</h1>
    <hr />
    <div>
      发布时间：<span>{{ noticeDetailTime }}</span>
    </div>
    <div>
      公告内容：<span>{{ noticeDetailContent }}</span>
    </div>
  </el-dialog>
</template>

<script setup>
import { getNoticeListHttp, getNoticeByIdHttp } from '../../request/api/notice'
var result = ref(false)
var arr = ref([])
var noticeList = ref([])
const noticelist = () => {
  arr.value = []
  getNoticeListHttp().then((res) => {
    result.value = true

    var arr1 = res.data.result
    arr1.map((item) => {
      arr.value.push(item)
    })
  })
}

var noticeshow = ref(false)
var noticeDetailTime = ref([])
var noticeDetailContent = ref([])

const noticeShow = (notice_id) => {
  noticeshow.value = true
  getNoticeByIdHttp(notice_id).then((res) => {
    noticeDetailTime.value = res.data.result.time
    noticeDetailContent.value = res.data.result.content
  })
}
</script>

<style lang="less">
.notice-lists {
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
    h1 {
      margin-bottom: 10px;
    }
  }
}

.notice-content {
  .el-dialog__body {
    width: 300px;
    height: 500px;
    h1 {
      margin-bottom: 10px;
    }
  }
}
</style>
